<template>
  <div id="app">
    <h1>根组件 {{ $store.state.count }}</h1>
    <input @input="handleInput" :value="count">
    <SonComp1 class="son"></SonComp1>
    <SonComp2 class="son"></SonComp2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import SonComp1 from '@/components/Son1.vue'
import SonComp2 from '@/components/Son2.vue'

export default {
  name: 'App',
  methods: {
    handleInput (e) {
      // 仅支持传递一个参数，如需传递多个参数需传递复杂类型如obj或数组
      // 例:
      // this.$store.commit('setCount', {
      // name: 'amns'
      // age: 114514
      // })
      this.$store.commit('setCount', +e.target.value)
    }
  },
  computed: {
    ...mapState(['count'])
  },
  components: {
    SonComp1,
    SonComp2
  }
}
</script>

<style lang="less">
#app {
  display: block;
  text-align: left;
  border: 2px solid gainsboro;
}
</style>
